<script lang="ts">
	import { getValue } from '$utils/get';
	import Button from '@smui/button';
	import IconButton from '@smui/icon-button';
	import { createEventDispatcher } from 'svelte';

	export let addressList: Partial<Member.Address>[] = [];
	export let loading = false;

	const dispatch = createEventDispatcher();

	const openEdit = (item) => dispatch('openEdit', item);
	const deleteAddress = (item) => dispatch('delete', item);
	const addAddress = () => dispatch('openEdit', {});
</script>

<div class="w-1320px max-w-100% min-w-350px bg-gray-1">
	<div class="flex flex-row justify-between items-center py-20px px-30px">
		<div class="card-title font-size-20px font-600">My Delivery Address</div>
	</div>

	{#if addressList.length > 0}
		<div class="address-list grid grid-cols-3 gap-10px px-20px pb-20px">
			{#each addressList as item (item.id)}
				<div
					class="address-item relative flex flex-col items-start line-height-16px font-size-14px py-10px px-20px border-color-gray-3 bg-white border border-solid"
				>
					<div class="mr-10px">{getValue(item, '')}</div>
					<div class="mr-10px">name: {getValue(item, 'fName') + getValue(item, 'lName')}</div>
					<div class="mr-10px">etail: {getValue(item, 'aDetail')}</div>
					<div class="mr-10px">city: {getValue(item, 'aCity')}</div>
					<div class="mr-10px">province: {getValue(item, 'aProvince')}</div>
					<div class="mr-10px">{getValue(item, 'email') + ' ' + getValue(item, 'postcode')}</div>

					<div
						class="address-item__cover flex-col justify-center p-10px gap-5px absolute w-full h-full top-0 left-0 bg-#00000066"
					>
						<Button
							class="material-icons clear-button-radius border border-solid border-color-blue-5 bg-blue-5"
							on:click={() => openEdit(item)}
							style="--mdc-theme-primary: #dbeafe;"
							>edit
						</Button>
						<Button
							class="material-icons clear-button-radius border border-solid border-color-red-5 bg-red-5"
							on:click={() => deleteAddress(item)}
							style="--mdc-theme-primary: #fee2e2;"
							>delete
						</Button>
					</div>
				</div>
			{/each}
			<div class="flex-cc border-color-gray-3 bg-white border border-solid">
				<IconButton
					class="material-icons color-gray-4 w-full h-full clear-button-radius"
					on:click={addAddress}
					ripple={false}>add</IconButton
				>
			</div>
		</div>
	{:else if loading}
		<div class="w-full h-100px text-center pt-30px">loading...</div>
	{:else}
		<div class="w-full h-100px text-center pt-30px">No address found</div>
	{/if}
</div>

<style lang="scss">
	.address-item {
		&__cover {
			display: none;
		}

		&:hover {
			.address-item__cover {
				display: flex;
			}
		}
	}
</style>
